<template>
  <div class="background-container">
    <div class="background-image_pre1"></div>
    <div class="background-image_pre2">
      <router-link :to="{ name: 'HomePage' }" class="custom-link">
        <button>了解更多</button>
      </router-link>
    </div>
  </div>
</template>

<style scoped>
body {
  margin: 0;
  padding: 0;
  height: 200vh;
  width: 100vw;
}

.background-container {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  width: 100vw;
  height: 200vh; /* 设置为两倍页面高度，以容纳两张图片的拼接 */
  border: 0;
}

.background-image_pre1 {
  width: 100%;
  height: 50%; /* 每张图片占据容器高度的一半 */
  background-size: cover;
  background-position: center;
  background-image: url("../assets/pre1.png");
  background-size: 100%;
}

.background-image_pre2 {
  width: 100%;
  height: 50%; /* 每张图片占据容器高度的一半 */
  background-size: cover;
  background-position: center;
  background-image: url("../assets/pre2.png");
}

.background-image:first-child {
  background-position: top; /* 第一张图片从顶部开始填充 */
}

.background-image:last-child {
  background-position: bottom; /* 第二张图片从底部开始填充 */
}

button {
  display: flex;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #ffffff;
  color: rgba(0, 174, 255, 0.916);
  font-weight: bolder;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 46%;
  margin-top: 42%;
}

.custom-link {
  text-decoration: none; /* 取消下划线 */
  color: inherit; /* 继承父元素的文字颜色 */
}
</style>
